SolidJSã®å ¬åŒã¯ã©ã€ã¢ã³ããµã€ãã«ãŒã¿ãŒã§ããSolid Routerã®å æ¬çã¬ã€ããã€ã³ã¹ããŒã«ãäœ¿çšæ³ãé«åºŠãªæ©èœãã·ãŒã ã¬ã¹ãªã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³æ§ç¯ã®ããã®ãã¹ããã©ã¯ãã£ã¹ã解説ããŸãã
Solid Router: SolidJSã§ã®ã¯ã©ã€ã¢ã³ããµã€ãããã²ãŒã·ã§ã³ããã¹ã¿ãŒãã
åè¶ããããã©ãŒãã³ã¹ãšã·ã³ãã«ãã§ç¥ãããSolidJSã¯ãã¢ãã³ãªWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®çŽ æŽãããåºç€ãæäŸããŸããçã«é åçã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªäœéšãåµåºããããã«ã¯ãå ç¢ãªã¯ã©ã€ã¢ã³ããµã€ãã«ãŒã¿ãŒãäžå¯æ¬ ã§ããããã§ç»å Žããã®ãSolid Routerã§ããããã¯SolidJSã®å ¬åŒãã€æšå¥šã«ãŒã¿ãŒã§ããããã¬ãŒã ã¯ãŒã¯ã®ãªã¢ã¯ãã£ããªååãšã·ãŒã ã¬ã¹ã«çµ±åããããã«èšèšãããŠããŸãã
ãã®å æ¬çãªã¬ã€ãã§ã¯ãSolid Routerã®äžçãæ·±ãæãäžããåºæ¬çãªã»ããã¢ããããè€éã§åçãªã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ïŒSPAïŒãæ§ç¯ããããã®é«åºŠãªãã¯ããã¯ãŸã§ãããããããšãã«ããŒããŸããçç·ŽããSolidJSéçºè ã§ãããå§ããã°ããã§ããããã®èšäºã¯ã¯ã©ã€ã¢ã³ããµã€ãããã²ãŒã·ã§ã³ããã¹ã¿ãŒããããã®ç¥èãšã¹ãã«ãæäŸããŸãã
Solid Routerãšã¯ïŒ
Solid Routerã¯ãSolidJSå°çšã«èšèšããã軜éã§é«æ§èœãªã¯ã©ã€ã¢ã³ããµã€ãã«ãŒã¿ãŒã§ããSolidJSã®ãªã¢ã¯ãã£ããã£ã掻çšããŠããã©ãŠã¶ã®URLã®å€æŽã«åºã¥ããŠUIãå¹ççã«æŽæ°ããŸããä»®æ³DOMã®å·®åæ€åºã«äŸåããåŸæ¥ã®ã«ãŒã¿ãŒãšã¯ç°ãªããSolid Routerã¯DOMãçŽæ¥æäœãããããããé«éã§äºæž¬å¯èœãªããã©ãŒãã³ã¹ãå®çŸããŸãã
Solid Routerã®äž»ãªæ©èœã¯æ¬¡ã®ãšããã§ãïŒ
- 宣èšçã«ãŒãã£ã³ã°ïŒã·ã³ãã«ã§çŽæçãªJSXããŒã¹ã®APIã䜿çšããŠã«ãŒããå®çŸ©ããŸãã
- åçã«ãŒãã£ã³ã°ïŒãã©ã¡ãŒã¿ãæã€ã«ãŒããç°¡åã«åŠçããåçã§ããŒã¿é§ååã®ã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãã
- ãã¹ããããã«ãŒãïŒãã¹ããããã«ãŒãã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ãè«ççãªã»ã¯ã·ã§ã³ã«æŽçããŸãã
- ãªã³ã¯ã³ã³ããŒãã³ãïŒ
<A>ã³ã³ããŒãã³ãã䜿çšããŠã«ãŒãéãã·ãŒã ã¬ã¹ã«ããã²ãŒãããŸããããã¯URLã®æŽæ°ãšã¢ã¯ãã£ããªãªã³ã¯ã®ã¹ã¿ã€ãªã³ã°ãèªåçã«åŠçããŸãã - ããŒã¿ããŒãã£ã³ã°ïŒã«ãŒããã¬ã³ããªã³ã°ããåã«éåæã§ããŒã¿ãããŒãããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããŸãã
- ãã©ã³ãžã·ã§ã³ïŒã«ãŒãéã«èŠèŠçã«é åçãªãã©ã³ãžã·ã§ã³ãäœæãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸãã
- ãšã©ãŒãã³ããªã³ã°ïŒãšã©ãŒãé©åã«åŠçããã«ã¹ã¿ã ã®ãšã©ãŒããŒãžã衚瀺ããŸãã
- History APIãšã®çµ±åïŒãã©ãŠã¶ã®History APIãšã·ãŒã ã¬ã¹ã«çµ±åãããŠãŒã¶ãŒããæ»ãããé²ãããã¿ã³ã䜿çšããŠããã²ãŒãã§ããããã«ããŸãã
Solid Routerãã¯ãããã
ã€ã³ã¹ããŒã«
Solid Routerãã€ã³ã¹ããŒã«ããã«ã¯ãã奜ã¿ã®ããã±ãŒãžãããŒãžã£ãŒã䜿çšããŠãã ããïŒ
npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
åºæ¬çãªã»ããã¢ãã
Solid Routerã®æ žãšãªãã®ã¯<Router>ãš<Route>ã³ã³ããŒãã³ãã§ãã<Router>ã³ã³ããŒãã³ãã¯ã¢ããªã±ãŒã·ã§ã³ã®ã«ãŒãã£ã³ã°ã·ã¹ãã ã®ã«ãŒããšããŠæ©èœãã<Route>ã³ã³ããŒãã³ãã¯URLãšã³ã³ããŒãã³ãéã®ãããã³ã°ãå®çŸ©ããŸãã
以äžã«åºæ¬çãªäŸã瀺ããŸãïŒ
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';
function App() {
return (
<Router>
<Route path="/"> <Home/> </Route>
<Route path="/about"> <About/> </Route>
</Router>
);
}
export default App;
ãã®äŸã§ã¯ã<Router>ã³ã³ããŒãã³ããã¢ããªã±ãŒã·ã§ã³å
šäœãã©ããããŠããŸãã<Route>ã³ã³ããŒãã³ãã¯2ã€ã®ã«ãŒããå®çŸ©ããŠããŸãã1ã€ã¯ã«ãŒããã¹ïŒã/ãïŒçšããã1ã€ã¯ã/aboutããã¹çšã§ãããŠãŒã¶ãŒããããã®ãã¹ã®ããããã«ç§»åãããšã察å¿ããã³ã³ããŒãã³ãïŒHomeãŸãã¯AboutïŒãã¬ã³ããªã³ã°ãããŸãã
<A>ã³ã³ããŒãã³ã
ã«ãŒãéãããã²ãŒãããã«ã¯ãSolid RouterãæäŸãã<A>ã³ã³ããŒãã³ãã䜿çšããŸãããã®ã³ã³ããŒãã³ãã¯éåžžã®HTMLã®<a>ã¿ã°ã«äŒŒãŠããŸãããURLã®æŽæ°ãèªåçã«åŠçããããŒãžå
šäœã®åèªã¿èŸŒã¿ãé²ããŸãã
import { A } from '@solidjs/router';
function Navigation() {
return (
<nav>
<A href="/">Home</A>
<A href="/about">About</A>
</nav>
);
}
export default Navigation;
ãŠãŒã¶ãŒããããã®ãªã³ã¯ã®ãããããã¯ãªãã¯ãããšãSolid Routerã¯ãã©ãŠã¶ã®URLãæŽæ°ããããŒãžå šäœã®åèªã¿èŸŒã¿ãããªã¬ãŒããããšãªã察å¿ããã³ã³ããŒãã³ããã¬ã³ããªã³ã°ããŸãã
é«åºŠãªã«ãŒãã£ã³ã°ãã¯ããã¯
ã«ãŒããã©ã¡ãŒã¿ã«ããåçã«ãŒãã£ã³ã°
Solid Routerã¯åçã«ãŒãã£ã³ã°ããµããŒãããŠããããã©ã¡ãŒã¿ãæã€ã«ãŒããäœæã§ããŸããããã¯ãç¹å®ã®IDãã¹ã©ãã°ã«åºã¥ããŠã³ã³ãã³ãã衚瀺ããã®ã«åœ¹ç«ã¡ãŸãã
import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';
function App() {
return (
<Router>
<Route path="/users/:id"> <UserProfile/> </Route>
</Router>
);
}
export default App;
ãã®äŸã§ã¯ããã¹å
ã®:idã»ã°ã¡ã³ããã«ãŒããã©ã¡ãŒã¿ã§ããUserProfileã³ã³ããŒãã³ãå
ã§idãã©ã¡ãŒã¿ã®å€ã«ã¢ã¯ã»ã¹ããã«ã¯ãuseParamsããã¯ã䜿çšã§ããŸãïŒ
import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';
function UserProfile() {
const params = useParams();
const [user] = createResource(() => params.id, fetchUser);
return (
<div>
<h1>User Profile</h1>
{user() ? (
<div>
<p>Name: {user().name}</p>
<p>Email: {user().email}</p>
</div>
) : (<p>Loading...</p>)}
</div>
);
}
async function fetchUser(id: string) {
const response = await fetch(`https://api.example.com/users/${id}`);
return response.json();
}
export default UserProfile;
useParamsããã¯ã¯ãã«ãŒããã©ã¡ãŒã¿ãå«ããªããžã§ã¯ããè¿ããŸãããã®å Žåãparams.idã«ã¯URLããã®idãã©ã¡ãŒã¿ã®å€ãå«ãŸããŸããæ¬¡ã«ãcreateResourceããã¯ã䜿çšããŠããã®IDã«åºã¥ããŠãŠãŒã¶ãŒããŒã¿ããã§ããããŸãã
åœéçãªäŸïŒã°ããŒãã«ãªeã³ããŒã¹ãã©ãããã©ãŒã ãæ³åããŠã¿ãŠãã ãããåçã«ãŒãã£ã³ã°ã䜿çšããŠãååIDã«åºã¥ããŠååã®è©³çްã衚瀺ã§ããŸãïŒ/products/:productIdãããã«ãããåååã«äžæã®URLãç°¡åã«äœæã§ãããŠãŒã¶ãŒãå Žæã«é¢ä¿ãªãç¹å®ã®ååãå
±æãããããã¯ããŒã¯ãããããã®ã容æã«ãªããŸãã
ãã¹ããããã«ãŒã
ãã¹ããããã«ãŒãã䜿çšãããšãã¢ããªã±ãŒã·ã§ã³ãè«ççãªã»ã¯ã·ã§ã³ã«æŽçã§ããŸããããã¯ãè€æ°ã®ããã²ãŒã·ã§ã³ã¬ãã«ãæã€è€éãªã¢ããªã±ãŒã·ã§ã³ã«ç¹ã«åœ¹ç«ã¡ãŸãã
import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';
function App() {
return (
<Router>
<Route path="/dashboard">
<Dashboard/>
<Route path="/profile"> <Profile/> </Route>
<Route path="/settings"> <Settings/> </Route>
</Route>
</Router>
);
}
export default App;
ãã®äŸã§ã¯ã<Dashboard>ã³ã³ããŒãã³ãã<Profile>ããã³<Settings>ã³ã³ããŒãã³ãã®ã³ã³ãããšããŠæ©èœããŸãã<Profile>ãš<Settings>ã®ã«ãŒãã¯<Dashboard>ã«ãŒãå
ã«ãã¹ããããŠããããŠãŒã¶ãŒãã/dashboardããã¹ã«ãããšãã«ã®ã¿ã¬ã³ããªã³ã°ãããããšãæå³ããŸãã
<Dashboard>ã³ã³ããŒãã³ãå
ã«ãã¹ããããã«ãŒããã¬ã³ããªã³ã°ããã«ã¯ã<Outlet>ã³ã³ããŒãã³ãã䜿çšããå¿
èŠããããŸãïŒ
import { Outlet } from '@solidjs/router';
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<nav>
<A href="/dashboard/profile">Profile</A>
<A href="/dashboard/settings">Settings</A>
</nav>
<Outlet/>
</div>
);
}
export default Dashboard;
<Outlet>ã³ã³ããŒãã³ãã¯ããã¹ããããã«ãŒããã¬ã³ããªã³ã°ããããã¬ãŒã¹ãã«ããŒãšããŠæ©èœããŸãããŠãŒã¶ãŒãã/dashboard/profileãã«ç§»åãããšã<Profile>ã³ã³ããŒãã³ãã<Outlet>ã³ã³ããŒãã³ãå
ã«ã¬ã³ããªã³ã°ãããŸããåæ§ã«ããŠãŒã¶ãŒãã/dashboard/settingsãã«ç§»åãããšã<Settings>ã³ã³ããŒãã³ãã<Outlet>ã³ã³ããŒãã³ãå
ã«ã¬ã³ããªã³ã°ãããŸãã
createResourceã«ããããŒã¿ããŒãã£ã³ã°
ã«ãŒããã¬ã³ããªã³ã°ããåã«éåæã§ããŒã¿ãããŒãããããšã¯ãã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããã«äžå¯æ¬ ã§ããSolid Routerã¯SolidJSã®createResourceããã¯ãšã·ãŒã ã¬ã¹ã«çµ±åãããŠãããããŒã¿ããŒãã£ã³ã°ã容æã«ããŸãã
ãã®äŸã¯å ã»ã©ã®UserProfileã³ã³ããŒãã³ãã§èŠãŸããããæç¢ºã«ããããã«å床瀺ããŸãïŒ
import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';
function UserProfile() {
const params = useParams();
const [user] = createResource(() => params.id, fetchUser);
return (
<div>
<h1>User Profile</h1>
{user() ? (
<div>
<p>Name: {user().name}</p>
<p>Email: {user().email}</p>
</div>
) : (<p>Loading...</p>)}
</div>
);
}
async function fetchUser(id: string) {
const response = await fetch(`https://api.example.com/users/${id}`);
return response.json();
}
export default UserProfile;
createResourceããã¯ã¯2ã€ã®åŒæ°ãåããŸãã1ã€ã¯ããŒã¿ããŒãã£ã³ã°ãããªã¬ãŒããã·ã°ãã«ããã1ã€ã¯ããŒã¿ããã§ãããã颿°ã§ãããã®å Žåãã·ã°ãã«ã¯() => params.idã§ãããããã¯idãã©ã¡ãŒã¿ã倿Žããããã³ã«ããŒã¿ããã§ãããããããšãæå³ããŸããfetchUser颿°ã¯ãIDã«åºã¥ããŠAPIãããŠãŒã¶ãŒããŒã¿ããã§ããããŸãã
createResourceããã¯ã¯ããªãœãŒã¹ïŒãã§ãããããããŒã¿ïŒãšããŒã¿ãåãã§ããããããã®é¢æ°ãå«ãé
åãè¿ããŸãããªãœãŒã¹ã¯ããŒã¿ãä¿æããã·ã°ãã«ã§ããã·ã°ãã«ãåŒã³åºãïŒuser()ïŒããšã§ããŒã¿ã«ã¢ã¯ã»ã¹ã§ããŸããããŒã¿ããŸã ããŒãäžã®å Žåãã·ã°ãã«ã¯undefinedãè¿ããŸããããã«ãããããŒã¿ããã§ãããããŠããéãããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒã衚瀺ã§ããŸãã
ãã©ã³ãžã·ã§ã³
ã«ãŒãéã«ãã©ã³ãžã·ã§ã³ã远å ãããšããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã倧å¹
ã«åäžãããããšãã§ããŸããSolid Routerã«ã¯çµã¿èŸŒã¿ã®ãã©ã³ãžã·ã§ã³ãµããŒãã¯ãããŸããããsolid-transition-groupã®ãããªã©ã€ãã©ãªãšããŸãçµ±åããŠãã¹ã ãŒãºã§èŠèŠçã«é
åçãªãã©ã³ãžã·ã§ã³ãå®çŸã§ããŸãã
ãŸããsolid-transition-groupããã±ãŒãžãã€ã³ã¹ããŒã«ããŸãïŒ
npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
次ã«ãã«ãŒãã<TransitionGroup>ã³ã³ããŒãã³ãã§ã©ããããŸãïŒ
import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';
function App() {
return (
<Router>
<TransitionGroup>
<Route path="/">
<Transition name="fade" duration={300}>
<Home/>
</Transition>
</Route>
<Route path="/about">
<Transition name="fade" duration={300}>
<About/>
</Transition>
</Route>
</TransitionGroup>
</Router>
);
}
export default App;
ãã®äŸã§ã¯ãåã«ãŒãã<Transition>ã³ã³ããŒãã³ãã§ã©ãããããŠããŸããnameããããã£ã¯ãã©ã³ãžã·ã§ã³çšã®CSSã¯ã©ã¹ã®ãã¬ãã£ãã¯ã¹ãæå®ããdurationããããã£ã¯ãã©ã³ãžã·ã§ã³ã®ç¶ç¶æéãããªç§åäœã§æå®ããŸãã
ã¹ã¿ã€ã«ã·ãŒãã§ãã©ã³ãžã·ã§ã³ã«å¯Ÿå¿ããCSSã¯ã©ã¹ãå®çŸ©ããå¿ èŠããããŸãïŒ
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 300ms ease-out;
}
ãã®CSSã³ãŒãã¯ãã·ã³ãã«ãªãã§ãŒãã€ã³/ãã§ãŒãã¢ãŠãã®ãã©ã³ãžã·ã§ã³ãå®çŸ©ããŸããã«ãŒãã«å
¥ããš.fade-enterãš.fade-enter-activeã¯ã©ã¹ãé©çšãããã³ã³ããŒãã³ãããã§ãŒãã€ã³ããŸããã«ãŒãããåºããš.fade-exitãš.fade-exit-activeã¯ã©ã¹ãé©çšãããã³ã³ããŒãã³ãããã§ãŒãã¢ãŠãããŸãã
ãšã©ãŒãã³ããªã³ã°
ãšã©ãŒãé©åã«åŠçããããšã¯ãè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããã«äžå¯æ¬ ã§ããSolid Routerã«ã¯çµã¿èŸŒã¿ã®ãšã©ãŒãã³ããªã³ã°ã¯ãããŸããããã°ããŒãã«ãªãšã©ãŒããŠã³ããªãã«ãŒãåºæã®ãšã©ãŒãã³ãã©ã䜿çšããŠç°¡åã«å®è£ ã§ããŸãã
以äžã«ã°ããŒãã«ãªãšã©ãŒããŠã³ããªã®äŸã瀺ããŸãïŒ
import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';
function App() {
const [error, setError] = createSignal(null);
return (
<ErrorBoundary fallback={<p>Something went wrong: {error()?.message}</p>}>
<Suspense fallback={<p>Loading...</p>}>
<Router>
<Route path="/"> <Home/> </Route>
<Route path="/about"> <About/> </Route>
</Router>
</Suspense>
</ErrorBoundary>
);
}
export default App;
<ErrorBoundary>ã³ã³ããŒãã³ãã¯ããã®åèŠçŽ å
ã§çºçãããšã©ãŒããã£ããããŸããfallbackããããã£ã¯ããšã©ãŒãçºçãããšãã«ã¬ã³ããªã³ã°ããã³ã³ããŒãã³ããæå®ããŸãããã®å Žåããšã©ãŒã¡ãã»ãŒãžãå«ããã©ã°ã©ããã¬ã³ããªã³ã°ããŸãã
<Suspense>ã³ã³ããŒãã³ãã¯ãä¿çäžã®ãããã¹ãåŠçããéåžžã¯éåæã³ã³ããŒãã³ããããŒã¿ããŒãã£ã³ã°ã§äœ¿çšãããŸãããããã¹ã解決ããããŸã§fallbackããããã£ã衚瀺ããŸãã
ãšã©ãŒãããªã¬ãŒããã«ã¯ãã³ã³ããŒãã³ãå ã§äŸå€ãã¹ããŒããŸãïŒ
function Home() {
throw new Error('Failed to load home page');
return <h1>Home</h1>;
}
export default Home;
ãã®ã³ãŒããå®è¡ããããšã<ErrorBoundary>ã³ã³ããŒãã³ãããšã©ãŒããã£ãããããã©ãŒã«ããã¯ã³ã³ããŒãã³ããã¬ã³ããªã³ã°ããŸãã
åœéåã«é¢ããèæ ®äºé ïŒãšã©ãŒã¡ãã»ãŒãžã衚瀺ããéã¯ãåœéåïŒi18nïŒãèæ ®ããŠãã ããã翻蚳ã©ã€ãã©ãªã䜿çšããŠããŠãŒã¶ãŒã®åªå èšèªã§ãšã©ãŒã¡ãã»ãŒãžãæäŸããŸããããšãã°ãæ¥æ¬ã®ãŠãŒã¶ãŒããšã©ãŒã«ééããå Žåãè±èªã§ã¯ãªãæ¥æ¬èªã§ãšã©ãŒã¡ãã»ãŒãžã衚瀺ãããã¹ãã§ãã
Solid Routerã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
- ã«ãŒããæŽçããïŒãã¹ããããã«ãŒãã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ãè«ççãªã»ã¯ã·ã§ã³ã«æŽçããŸããããã«ãããã³ãŒãã®ä¿å®ãšããã²ãŒã·ã§ã³ã容æã«ãªããŸãã
- åçã³ã³ãã³ãã«ã«ãŒããã©ã¡ãŒã¿ã䜿çšããïŒã«ãŒããã©ã¡ãŒã¿ã䜿çšããŠãç¹å®ã®IDãã¹ã©ãã°ã«åºã¥ããŠã³ã³ãã³ãã衚瀺ããããã®åçãªURLãäœæããŸãã
- éåæã§ããŒã¿ãããŒãããïŒã«ãŒããã¬ã³ããªã³ã°ããåã«éåæã§ããŒã¿ãããŒãããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããŸãã
- ã«ãŒãéã«ãã©ã³ãžã·ã§ã³ã远å ããïŒãã©ã³ãžã·ã§ã³ã䜿çšããŠãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããã¢ããªã±ãŒã·ã§ã³ãããæŽç·Žããããã®ã«ããŸãã
- ãšã©ãŒãé©åã«åŠçããïŒãšã©ãŒãã³ããªã³ã°ãå®è£ ããŠããšã©ãŒããã£ãããããŠãŒã¶ãŒãã¬ã³ããªãŒãªæ¹æ³ã§è¡šç€ºããŸãã
- èšè¿°çãªã«ãŒãåã䜿çšããïŒã«ãŒãã®å å®¹ãæ£ç¢ºã«åæ ããã«ãŒãåãéžæããŸããããã«ãããã¢ããªã±ãŒã·ã§ã³ã®æ§é ãçè§£ãããããªããŸãã
- ã«ãŒãããã¹ãããïŒåäœãã¹ããèšè¿°ããŠãã«ãŒããæ£ããæ©èœããããšã確èªããŸããããã«ããããšã©ãŒãæ©æã«çºèŠãããªã°ã¬ãã·ã§ã³ãé²ãããšãã§ããŸãã
ãŸãšã
Solid Routerã¯ãSolidJSãšã·ãŒã ã¬ã¹ã«çµ±åããã匷åã§æè»ãªã¯ã©ã€ã¢ã³ããµã€ãã«ãŒã¿ãŒã§ãããã®æ©èœããã¹ã¿ãŒãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãã¹ã ãŒãºã§é åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸãããè€éã§åçãªã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸããåºæ¬çãªã»ããã¢ãããããåçã«ãŒãã£ã³ã°ãããŒã¿ããŒãã£ã³ã°ããã©ã³ãžã·ã§ã³ãªã©ã®é«åºŠãªãã¯ããã¯ãŸã§ããã®ã¬ã€ãã¯SolidJSã«ãããã¯ã©ã€ã¢ã³ããµã€ãããã²ãŒã·ã§ã³ã®äžçãèªä¿¡ãæã£ãŠèªæµ·ããããã®ç¥èãšã¹ãã«ãæäŸããŸãããSolid Routerã®åãæŽ»çšããSolidJSã¢ããªã±ãŒã·ã§ã³ã®ããã³ã·ã£ã«ãæå€§éã«åŒãåºããŸãããïŒ
ææ°ã®æ å ±ãšäŸã«ã€ããŠã¯ãSolid Routerã®å ¬åŒããã¥ã¡ã³ããåç §ããããšãå¿ããªãã§ãã ããïŒ[Solid Routerããã¥ã¡ã³ããªã³ã¯ - ãã¬ãŒã¹ãã«ããŒ]
SolidJSã§çŽ æŽããããã®ãäœãç¶ããŠãã ããïŒ